<script setup lang="ts">
import { ref, watch, inject, onBeforeMount } from 'vue';
import { popMessageKey, popMessage } from '@/type'
import { commentCreate, getCommentCount } from '../../utils/api'
import { useRouter } from 'vue-router'
import CommentList from '@components/Comment/CommentList.vue';
const popMessage = inject(popMessageKey) as popMessage
const router = useRouter()

// 当前页码
// const currentPage = ref(1)
// 每页数量
const pageSize = ref(10)

const props = defineProps(['postId',
    'isShow', 'switchShow',
    'index', 'commentCount',
    'showMore', 'showComment',
    'updatePost'])
// 监听文本框内容是否超过限制
let textValue = ref('')
let isEnough = ref(false)
watch(textValue, (newVal) => {
    console.log(newVal.length)
    if (140 - newVal.length < 0) {
        isEnough.value = true
    } else {
        isEnough.value = false
    }
})

// 发送评论
const sendComment = () => {
    if (textValue.value.length === 0) {
        popMessage('请输入内容', 'error')
        return
    }
    if (textValue.value.length > 140) {
        popMessage('超出字数限制', 'error')
        return
    }
    commentCreate(textValue.value, 'p', props.postId)
        .then((res) => {
            if (res.data.code === 1) {
                console.log(res.data.data)
                textValue.value = ''
                getCommentCountWarp(props.postId, 'p')
                props.updatePost(props.postId)
                popMessage('评论成功', 'success')
            } else {
                console.log(res)
                console.log('未知错误')

            }
        })
}
const getCommentCountWarp = (postId: string, type: string) => {
    getCommentCount(postId, type).then((res) => {
        commentCount.value = res.data.data
    })
}
const commentCount = ref(0)
onBeforeMount(() => {
    // getNewCommentList(props.postId)
    // getLikesCommentList(props.postId)
    getCommentCountWarp(props.postId, 'p')
})

</script>
<template>
    <div class="cmt-external" v-if="isShow">
        <div class="cmt-internal">
            <div class="cmt-textBox">
                <!-- 评论框 -->
                <textarea placeholder="评论" v-model="textValue"></textarea>
            </div>
            <div class="cmt-btns">
                <div class="btn-left">
                    <div class="emoji">
                        <svg t="1701613046076" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8388" width="18px" height="18px">
                            <path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8389">
                            </path>
                            <path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8390">
                            </path>
                            <path
                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z"
                                p-id="8391"></path>
                            <path
                                d="M664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-0.3-4.2-3.9-7.4-8.1-7.4H360c-4.6 0-8.2 3.8-8 8.4 4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6c0.2-4.6-3.4-8.4-8-8.4z"
                                p-id="8392"></path>
                        </svg>
                    </div>
                    <div class="at" style="font-size: 18px;">@</div>
                </div>

                <div class="btn-right">
                    <span :class="{ enough: isEnough }">{{ 140 - textValue.length }}</span>
                    <button @click="sendComment">评论</button>
                </div>
            </div>
            <div class="cmts" v-if="commentCount !== 0 && showComment">
                <!-- 精彩评论 -->
                <div class="good-cmts">
                    <h3>精彩评论</h3>
                    <CommentList :key="commentCount" :by-likes="true" :type-id="props.postId" :type="ref('p')" />
                </div>
                <!-- 最新评论 -->
                <div class="new-cmts">
                    <h3 style="margin-top: 30px;">最新评论({{ commentCount }})</h3>
                    <CommentList :key="commentCount" :by-likes="false" :type-id="props.postId" :type="ref('p')" />
                </div>
                <div v-if="props.showMore" class="more">
                    <div class="left" v-show="(commentCount - pageSize) > 0">
                        后面还有{{ commentCount - pageSize }}条评论,&nbsp;
                        <a @click="router.push({ name: 'PostPage', params: { postId: props.postId } })">查看更多&gt;</a>
                    </div>
                    <a class="right" @click="switchShow(index)">
                        收起
                        <img src="../../assets/up.svg">
                    </a>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style lang="css" scoped>
a {
    cursor: pointer;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

.cmt-external {
    margin-top: 12px;
    background-color: #F8F8F8;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
}

.cmt-internal {
    padding: 15px;
}

.cmt-textBox {
    background-color: #fff;
    padding-right: 14px;
    border: 1px solid #CDCDCD;
    border-radius: 2px;
}

.cmt-textBox textarea {
    display: block;
    border: none;
    resize: none;
    outline: none;
    width: 100%;
    height: 50px;
    padding: 5px 6px 6px 6px;
}

.cmt-btns {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
}

.cmt-btns .btn-left {
    display: flex;
    align-items: center;
}

.cmt-btns .btn-left div {
    cursor: pointer;
    display: flex;
    margin-right: 10px;
    color: #999;
}

.cmt-btns .btn-right .enough {
    color: #C20C0C;
}

.cmt-btns .btn-right span {
    font-size: 10px;
    color: #999;
    margin-right: 10px;
}

.cmt-btns .btn-right button {
    cursor: pointer;
    height: 25px;
    width: 46px;
    color: #fff;
    border: 1px solid #5CA6E5;
    border-radius: 3px;
    /* border: none; */
    background: linear-gradient(to bottom, #5CA6E5, #378CD2);
}

.cmt-btns .btn-right button:hover {
    filter: brightness(1.1);
    background: linear-gradient(to bottom, #5CA6E5, #378CD2);
}

.cmt-internal .cmts {
    margin-top: 20px;
}

.cmts h3 {
    margin: 0px;
    font-weight: normal;
    font-size: 12px;
    color: #333;
    border-bottom: 1px solid #CFCFCF;
}


.cmts .more {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    width: 100%;
    color: #999;
    font-size: 12px;
}

.cmts .more .left a {
    color: #666;
}

.cmts .more .right {
    display: flex;
}

.cmts .more .right a {
    color: #666;
}

.cmts .more .right img {
    width: 15px;
    height: 15px;
}

.more .right img {
    width: 15px;
    height: 15px;
}
</style>